﻿@model DiarySocial.ViewModels.GetCommentsVM
<div class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
            <section class="panel panel-default">
                <header class="panel-heading">
                    Comments
                </header>
                <section id="comments-for-id-@Model.DiaryId" class="chat-list panel-body">
                    @foreach (var c in Model.Comments)
                    {
                        <article id="chat-id-@c.Id" class="chat-item left">
                            <a href="#" class="pull-left thumb-sm avatar"><img src="~/Images/avatar.png" alt=""></a>
                            <section class="chat-body">
                                <div class="panel b-light text-sm m-b-none">
                                    <div class="panel-body">
                                        <span class="arrow left"></span>
                                        <p class="m-b-none">
                                            <a href="#">@c.CommentAuthor.Name</a>
                                            <span>: </span>
                                            @c.Text
                                        </p>
                                    </div>
                                </div>
                                <small class="text-muted"><i class="fa fa-ok text-success"></i> @MyHelpers.DisplayTime(@c.Time)</small>
                            </section>
                        </article>
                    }
                </section>
                <footer class="panel-footer">
                    <article class="chat-item" id="chat-form">
                        <a class="pull-left thumb-sm avatar"><img src="~/Images/avatar.png" class="img-circle"></a>
                        <section class="chat-body send-comment-form">
                            @using (Ajax.BeginForm("Comment", "Diary", new { id = Model.DiaryId }, new AjaxOptions()
                            {
                                HttpMethod = "post",
                                UpdateTargetId = "comments-for-id-" + Model.DiaryId,
                                InsertionMode = InsertionMode.Replace,
                                OnBegin = "onSendCommentSuccess()"
                            }))
                            {
                                <div class="input-group">
                                    @Html.TextBoxFor(c => c.CommentText, new { @class = "form-control", @placeholder = "Say something" })
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit" role="button">SEND</button>
                                    </span>
                                </div>
                            }
                        </section>
                    </article>
                </footer>
            </section>
        </div>
    </div>
</div>
@Scripts.Render("~/bundles/bootstrapval")
<script type="text/javascript">
    function onSendCommentSuccess() {
        $(".send-comment-form input[type=text]").val("");
    }
</script>
